<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义字体测试</title>
		<!-- 引入Vue -->
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 选择不同字体 -->
			<h1>{{message}}</h1>
			<el-select @change="change" v-model="value" placeholder="请选择">
				<el-option v-for="item in fontList" :key="item.id" :label="item.label" :value="item.id">
				</el-option>
			</el-select>
		</div>
		<h1>自定义字体测试</h1>
		<h2>自定义字体测试</h2>
		<h3>自定义字体测试</h3>
		<h4>自定义字体测试</h4>
		<h5>自定义字体测试</h5>
		<h6>自定义字体测试</h6>
		<p>自定义字体测试，hello world</p>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				message: '<h1>自定义字体测试</h1>',
				value: null,
				style:null,
				fontList: [{
						id: 1,
						fontUrl: "https://iyuwb.gitee.io/notes/font/chuangcu.ttf",
						fontFamily: "myFirstFont1",
						label: "demo1"
					},
					{
						id: 2,
						fontUrl: "https://iyuwb.gitee.io/notes/font/longyin.ttf",
						fontFamily: "myFirstFont2",
						label: "demo2"
					},
					{
						id: 3,
						fontUrl: "https://iyuwb.gitee.io/notes/font/qiuye.ttf",
						fontFamily: "myFirstFont3",
						label: "demo3"
					}
				]
			},
			methods: {
				change(value) {
					console.log(value)
					this.fontList.forEach(item => {
						if (item.id === value) {
							this.fontSelect(item)
						}
					})
				},
				fontSelect(item) {
					if(this.style)	this.style.remove()
					let code = `@font-face { font-family: ${item.fontFamily};src: url('${item.fontUrl}');}  html,body{ font-family: ${item.fontFamily}, serif;}`
					this.style = document.createElement("style");
					this.style.type = "text/css";
					this.style.rel = "stylesheet";
					this.style.appendChild(document.createTextNode(code));
					var head = document.getElementsByTagName("head")[0];
					head.appendChild(this.style);
				}
			}
		})
	</script>
</html>
